<template>
    <div>
        <header class="head">
            <router-link to="/jlcy" tag="span" class="s">
                <返回</router-link>
                    <p>购物车</p>
        </header>
        <div class="box">
            <div class="jz">
                <input type="checkbox" class="ipt">
                <span class="qx">全选</span>
                <span class="hj">合计:</span>
                <span class="d">￥0.0元</span>
                <button class="btn">结算</button>
            </div>
            <footer class="db">
                <div class="foot">
                    <span class="iconfont icon-zhuye"></span>
                    <p class="x"></p>
                    <span class="iconfont icon-wode"></span>
                </div>
            </footer>
        </div>
    </div>
</template>
<script>
export default {

}
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

.head {
    position: relative;
    width: 100%;
    .px2rem(height, 50);
    background: red;
    display: flex; // justify-content: center;
    p {
        width: 100%;
        text-align: center;
        .px2rem(font-size, 30);
        color: #fff;
        font-family: '楷体';
        line-height: 1.8;
    }
    span {
        position: absolute;
        top: 0;
        left: 0;
        .px2rem(width, 100);
        .px2rem(height, 50);
        .px2rem(font-size, 20);
        text-align: center;
        line-height: 2.6;
    }
}

.box {
    .px2rem(height, 1200);
    background: pink;
}

.db {
    margin-top: 489px;
}

.foot {
    z-index: 999;
    .px2rem(line-height, 70);
    background: red;
    display: flex;
    justify-content: space-around;
    .icon-zhuye {
        .px2rem(font-size, 45);
        color: #fff;
    }
    .icon-wode {
        .px2rem(font-size, 45);
        color: #fff;
    }
    .x {
        .px2rem(width, 2);
        .px2rem(height, 60);
        background: #fff;
        margin-top: 4px;
    }
}

.jz {
    // .px2rem(line-height, 60);
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ipt {
    margin-right: 40px;
    margin-top: 5px;
}
</style>
